<template>
  <view class="blessingBag" :class="step===1?'blessingBagAnimation':''" @click="sendLuckReward">
    <view class="blessingBag-box">
      <view class="blessingBag-time">{{time}}s</view>
      <view class="blessingBag-image">
        <image mode="heightFix"  :src="image_hosts+'fudai.png'"></image>
      </view>
    </view>
    <view class="blessingBag-desc">最高{{limit}}积分</view>
  </view>
</template>
<script>
/**
 * 福袋
 */
export default {
  props:['limit'],
  data() {
    return {
      image_hosts: this.image_host + 'answeringHomework/',
      step:1,
      time:10
    };
  },
  created() {
    setTimeout(()=>{
      this.step=2
      this.timeInterval()
    },1500)

  },
  methods: {
    timeInterval()
    {
      let timeO= setInterval(()=>{
        this.time--
        if(this.time<=0){
          clearInterval(timeO)
          this.$emit('timeEnd')
        }
      },1000)
    },
    //领取福袋
    sendLuckReward()
    {
      this.$emit("sendLuckReward")
    }
  },
}
</script>

<style lang="scss">
@function tovmin($rpx){//$rpx为需要转换的字号
  @return #{$rpx * 100 / 750}vmin;
}
.blessingBag{
  position: absolute;
  top: tovmin(30);
  right: tovmin(18);
  min-width: tovmin(108);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all .2s linear;
}
.blessingBag-box{
  width: tovmin(82);
  height: tovmin(82);
  background-color: rgba(0,0,0,.4);
  border-radius: tovmin(8);
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  transition: all .3s linear;
}
.blessingBag-time{
  position: absolute;
  top: 0;
  left: 0;
  font-size: tovmin(20);
  color: #fff;
  font-weight: 700;
  box-sizing: border-box;
  padding: tovmin(3) tovmin(6);
  border-radius: tovmin(6);
  background-color: rgba(0,0,0,.4);
  z-index: 10;
}
.blessingBag-image{
  width: 100%;
  height: 100%;
  transform: rotate(45deg);
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  margin-top: tovmin(13);
  transition: all .3s linear;
}
.blessingBag-image image{
  width: 100%;
  height: 100%;
}
.blessingBag-desc{
  width: 100%;
  background-color: #FAE984;
  border: tovmin(2) solid #F9EA81;
  font-size: tovmin(19);
  color: #AE0100;
  font-weight: 700;
  border-radius: tovmin(20);
  text-align: center;
  box-sizing: border-box;
  padding: 0 tovmin(5);
  margin-top: tovmin(-10);
  position: relative;
  z-index: 1;
}
.blessingBagAnimation{
  //top: 50%;
  //left: 50%;
  //transform: translate(-50%,-50%);
}
.blessingBagAnimation .blessingBag-box{
  background-color: rgba(0,0,0,0);
  width: auto;
  height: auto;
}
.blessingBagAnimation .blessingBag-box .blessingBag-image{
  width: 0upx;
  height: 0upx;
  animation-name: blessingBag-image;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate; /* 如果你想反向播放动画，可以设为 alternate */
  transform: rotate(0deg)

}
@keyframes blessingBag-image {
  0%{
    //transform: rotate(15deg);
    width: tovmin(150);
    height: tovmin(150);
  }
  100%{
    //transform: rotate(-15deg);
    width: tovmin(200);
    height: tovmin(200);
  }
}
.blessingBagAnimation .blessingBag-time{
  display: none;
}
.blessingBagAnimation .blessingBag-desc{
  display: none;
}
@media screen and (orientation:landscape){
  .blessingBag{
    top: tovmin(100);
  }

}
</style>
